<!-- 智造双碳—能效预警标签，进入能效预警页面，实现能效预警管理数据列表显示 CRUD -->
<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="12" :offset="0">
        <h1>智造双碳—能效预警</h1>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="20" :offset="4">
        检测点名称:
        <el-input style="width: 200px" v-model="name"></el-input> 检测点地址:
        <el-input style="width: 200px" v-model="address"></el-input>
        <el-button type="success" size="medium" @click="queryList()"
          >查询</el-button
        >
        <el-button type="info " size="medium" @click="clear()">重置</el-button>
      </el-col>

      <el-col :span="12" :offset="0">
        <el-button type="primary" size="medium" @click="sava('添加')"
          >添加</el-button
        >
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="24" :offset="0">
        <el-table :data="earlyWarning" style="width: 100%">
          <el-table-column prop="id" label="编号" width="120" />
          <el-table-column prop="name" label="检测点名称" width="120" />
          <el-table-column prop="address" label="检测点地址" width="180" />
          <el-table-column prop="power" label="实时功率" width="155" />
          <el-table-column prop="voltage" label="实时电压" width="150" />
          <el-table-column prop="state" label="状态" width="150" />
          <el-table-column prop="reporttime" label="上报时间" width="160" />
          <el-table-column prop="remark" label="备注" width="150" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="getUpdateById(scope.$index, scope.row, '编辑')"
                >编辑</el-button
              >

              <el-popconfirm
                confirm-button-text="要删"
                cancel-button-text="不删"
                icon="el-icon-info"
                icon-color="red"
                title="要删除这条数据吗?"
                @confirm="deleteById(scope.$index, scope.row)"
              >
                <el-button size="mini" type="danger" slot="reference"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <!-- 弹框 -->
    <el-dialog :title="title" width="40%" :visible.sync="savaOrUpdateDialog">
      <div>
        <el-row :gutter="20">
          <el-col :span="5" :offset="5">
            <span style="line-height: 40px">检测点名称: </span>
          </el-col>
          <el-col :span="5" :offset="0">
            <el-input style="width: 200px" v-model="saveOrUpdateInfo.name" />
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="5" :offset="5">
            <span style="line-height: 40px">检测点地址: </span>
          </el-col>
          <el-col :span="5" :offset="0">
            <el-input style="width: 200px" v-model="saveOrUpdateInfo.address" />
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="5" :offset="5">
            <span style="line-height: 40px">实时功率: </span>
          </el-col>
          <el-col :span="5" :offset="0">
            <el-input style="width: 200px" v-model="saveOrUpdateInfo.power" />
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="5" :offset="5">
            <span style="line-height: 40px">实时电压: </span>
          </el-col>
          <el-col :span="5" :offset="0">
            <el-input style="width: 200px" v-model="saveOrUpdateInfo.voltage" />
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="5" :offset="5">
            <span style="line-height: 40px">状态: </span>
          </el-col>
          <el-col :span="5" :offset="0">
            <el-input style="width: 200px" v-model="saveOrUpdateInfo.state" />
          </el-col>
        </el-row>
      </div>
      <span slot="footer">
        <el-button @click="savaOrUpdateDialog = false">Cancel</el-button>
        <el-button type="primary" @click="saveOrUpdate()">OK</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryEarlyWarningList,
  update,
  deleteByIdOne,
  add,
} from "@/api/smart_made_double_carbon/Energy_efficiency_early_warning.js";

export default {
  data() {
    return {
      savaOrUpdateDialog: false, // 弹窗控制
      earlyWarning: [{}], // 主页面数据
      name: "", // 查询条件
      address: "", // 查询条件
      saveOrUpdateInfo: {
        // 新增 or 修改的参数
        id: 0,
      },
      title: "", // 弹窗标题控制
    };
  },
  methods: {
    // 查询
    queryList() {
      queryEarlyWarningList(this.name, this.address).then((resp) => {
        this.earlyWarning = resp.data;
        this.$message({
          message: "数据已刷新",
          type: "success",
        });
      });
    },
    // 添加or修改
    saveOrUpdate() {
      if (this.saveOrUpdateInfo.id == 0) {
        // 添加
        add(this.saveOrUpdateInfo).then((resp) => {
          if (resp.data == 1) {
            this.$message({
              message: "新增成功",
              type: "success",
            });
            this.savaOrUpdateDialog = false;
            this.queryList();
          }
        });
      }
      update(this.saveOrUpdateInfo).then((resp) => {
        if (resp.data == 1) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.savaOrUpdateDialog = false;
          this.queryList();
        }
      });
      // 修改
    },
    // 修改
    getUpdateById(index, row, title) {
      this.title = title;
      this.saveOrUpdateInfo = { ...row };
      this.savaOrUpdateDialog = true;
    },
    // 删除
    deleteById(index, row) {
      deleteByIdOne(row.id).then((resp) => {
        if (resp.data == 1) {
          this.$message({
            message: "删除成功",
            type: "warning",
          });
          this.queryList();
        }
      });
    },
    sava(title) {
      if (this.savaOrUpdateDialog == false) {
        this.saveOrUpdateInfo = { id: 0 };
        this.title = title;
        this.savaOrUpdateDialog = true;
      }
    },

    clear() {
      this.name = "";
      this.address = "";
      this.queryList();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.queryList();
  },
};
</script>

<style></style>